<html>
<head>
  <title>Evernote Export</title>
  <basefont face="微软雅黑" size="2" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="exporter-version" content="YXBJ Windows/601748 (zh-CN, DDL); Windows/10.0.0 (Win64); EDAMVersion=V2;"/>
  <style>
    body, td {
      font-family: 微软雅黑;
      font-size: 10pt;
    }
  </style>
</head>
<body>
<a name="629"/>

<div>
<span><div><div><br clear="none"/></div><div><br clear="none" style="color: rgb(47, 47, 47);"/></div><div><br clear="none"/></div><div><span style="font-size: 12pt; font-weight: bold;">浏览器的同源策略：</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">    浏览器安全策略，保障非同源资源之间数据访问的安全性。</span></div><div><span style="font-size: 12pt;">    默认不允许非同源的资源直接访问。</span></div><div><span style="font-size: 12pt;">    URL：</span></div><div><span style="font-size: 12pt;">        协议://域名:端口/路径名称?查询字符串#位置标识符</span></div><div><span style="font-size: 12pt;">    同源：</span><span style="font-size: 12pt; font-weight: bold;">协议、域名、端口</span><span style="font-size: 12pt;">完全一致，只要三个中有任何一个不一致，则是非同源</span></div><div><span style="font-size: 12pt;"><br/></span></div><div><span style="font-size: 12pt;">http协议的默认端口号是80</span></div><div><span style="font-size: 12pt;">https</span><span style="font-size: 12pt;">协议的默认端口号是443</span></div><div><span style="font-size: 12pt;">mysq数据库的</span><span style="font-size: 12pt;">默认端口号是3306</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">    非同源资源间需要进行访问，则需要实现跨域。</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">解决资源跨域访问：</span></div><div><span style="font-size: 12pt;">    a. CORS</span></div><div><span style="font-size: 12pt;">        cross-origin resource sharing</span></div><div><span style="font-size: 12pt;">        服务器端：</span></div><div><span style="font-size: 12pt;">            设置响应头信息：        Access-Control-Allow-Origin:*</span></div><div><span style="font-size: 12pt;">        前端：</span></div><div><span style="font-size: 12pt;">            ajax</span></div><div><span style="font-size: 12pt;">        可解决GET/POST跨域需求</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">    b. jsonp</span></div><div><span style="font-size: 12pt;">        &lt;script src=&quot;&quot;&gt;&lt;/script&gt;</span></div><div><span style="font-size: 12pt;">        利用&lt;script&gt;在引入外部JS时不受同源策略限制的特性，来实现跨域。(src的开放性原则)</span></div><div><span style="font-size: 12pt;">        JSONP只能处理GET请求方式的跨域</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">        后端：</span></div><div><span style="font-size: 12pt;">            由服务器端构建一个字符串：字符串中的内容是能够在 JS 中执行的函数调用的结构</span></div><div><span style="font-size: 12pt;">        前端：</span></div><div><span style="font-size: 12pt;">            1. 创建 &lt;script&gt; 元素</span></div><div><span style="font-size: 12pt;">            2. 设置 src 属性，传递 callback 参数指明全局回调函数的名称</span></div><div><span style="font-size: 12pt;">            3. 添加到 body 中</span></div><div><span style="font-size: 12pt;">            4. 创建全局函数，用于处理响应数据</span></div><div><span style="font-size: 12pt;">            5. 删除 &lt;script&gt; 元素</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">    c.   proxy</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">JSONP接口：</span></div><div><span style="font-size: 12pt;">    百度：</span><a href="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" shape="rect" style="font-size: 12pt; color: rgb(0, 0, 0);" target="_blank">https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=</a><span style="font-size: 12pt;">关键字&amp;cb=回调函数名</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><h2><span style="font-size: 12pt; font-weight: bold;">promise（ES6）</span></h2><div><br clear="none" style="font-weight: bold; font-size: 14pt;"/></div><div><span style="font-size: 12pt; font-weight: bold;">    </span><span style="font-size: 12pt;">承诺：服务员承诺会把菜端上来</span></div><div><br clear="none" style="font-size: 14pt;"/></div><div><span style="font-size: 12pt;">    承诺：---&gt;  兑现 （resolve）  或  失信（rejected）</span></div><div><br clear="none" style="font-size: 14pt;"/></div><div><span style="font-size: 12pt;">    这个对象有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和 Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英语意思就是「承诺」，表示其他手段无法改变。</span></div><div><br clear="none" style="font-size: 14pt;"/></div><div><br clear="none" style="font-size: 14pt;"/></div><div><br clear="none" style="font-size: 14pt;"/></div><div><span style="font-size: 12pt;">Promise对象(ES6)：</span></div><div><span style="font-size: 12pt;">    用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。它允许你为异步操作的成功和失败分别绑定相应的处理方法。这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象。</span></div><div><span style="font-size: 12pt;">    一个 Promise有以下几种状态:</span></div><div><span style="font-size: 12pt;">        pending: 初始状态，既不是成功，也不是失败状态。</span></div><div><span style="font-size: 12pt;">        resolved: 意味着操作成功完成。</span></div><div><span style="font-size: 12pt;">        rejected: 意味着操作失败。</span></div><div><br clear="none" style="font-size: 14pt;"/></div><div><span style="font-size: 12pt;">    创建Promise对象：</span></div><div><span style="font-size: 12pt;">        var promise = new Promise( executor );</span></div><div><span style="font-size: 12pt;">            executor: 是一个函数，该函数在创建Promise对象的同时被调用执行。</span></div><div><span style="font-size: 12pt;">            executor:</span></div><div><span style="font-size: 12pt;">                语法：function(resolve, reject) {...}</span></div><div><span style="font-size: 12pt;">                --resolve：将Promise对象状态修改为 fulfilled，可以传递参数到then方法的第一个函数中</span></div><div><span style="font-size: 12pt;">                --reject：将Promise对象状态修改为 rejected，可以传递参数到 then 方法的第二个函数中</span></div><div><br clear="none" style="font-size: 14pt;"/></div><div><span style="font-size: 12pt;">    API：</span></div><div><span style="font-size: 12pt;">        Promise.prototype.then(onfulfilled, onrejected) 方法：</span></div><div><span style="font-size: 12pt;">            -- onfulfilled 绑定的是成功时执行的函数</span></div><div><span style="font-size: 12pt;">            -- onrejected 绑定的是失败时执行的函数</span></div><div><br clear="none" style="font-size: 14pt;"/></div><div><span style="font-size: 12pt;">        Promise.all(iterable)</span></div><div><span style="font-size: 12pt;">            -- iterable : 可迭代对象（数组）</span></div><div><span style="font-size: 12pt;">            -- 返回Promise对象</span></div><div><span style="font-size: 12pt;">            -- 当数组中所有Promise对象都完成时，回调执行成功的函数，当只要有一个执行失败时，就回调执行失败的函数。</span></div><div><br style="font-size: 14pt;"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-family: Monaco; color: rgb(51, 51, 51); font-size: 12pt;">var promise1 = Promise.resolve(3);</span></div><div><span style="font-family: Monaco; color: rgb(51, 51, 51); font-size: 12pt;">var promise2 = 42;</span></div><div><span style="font-family: Monaco; color: rgb(51, 51, 51); font-size: 12pt;">var promise3 = new Promise(function(resolve, reject) {</span></div><div><span style="font-family: Monaco; color: rgb(51, 51, 51); font-size: 12pt;">  setTimeout(resolve, 100, 'foo');</span></div><div><span style="font-family: Monaco; color: rgb(51, 51, 51); font-size: 12pt;">});</span></div><div><br style="font-family: Monaco; color: rgb(51, 51, 51); font-size: 14pt;"/></div><div><span style="font-family: Monaco; color: rgb(51, 51, 51); font-size: 12pt;">Promise.all([promise1, promise2, promise3]).then(values =&gt; {</span></div><div><span style="font-family: Monaco; color: rgb(51, 51, 51); font-size: 12pt;">  console.log(values); // values是个数组</span></div><div><span style="font-family: Monaco; color: rgb(51, 51, 51); font-size: 12pt;">});</span></div></div><div><br clear="none" style="font-weight: bold; font-size: 14pt;"/></div><div><br/></div><div><br/></div><div><span style="font-size: 12pt;"> Promise.race(iterable)</span></div><div><span style="font-size: 12pt;">    -- iterable : 可迭代对象（数组）</span></div><div><span style="font-size: 12pt;">    -- 返回Promise对象</span></div><div><span style="font-size: 12pt;">    -- 当数组中所有Promise对象任意有一份完成时，回调执行成功的函数。</span></div><div><span style="font-size: 12pt;"><br/></span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><font face="Arial" style="font-size: 12pt;">var promise1 = Promise.resolve(3);</font></div><div><font face="Arial" style="font-size: 12pt;">var promise2 = 42;</font></div><div><font face="Arial" style="font-size: 12pt;">var promise3 = new Promise(function(resolve, reject) {</font></div><div><font face="Arial" style="font-size: 12pt;">  setTimeout(resolve, 100, 'foo');</font></div><div><font face="Arial" style="font-size: 12pt;">});</font></div><div><font face="Arial" style="font-size: 12pt;">Promise.race([promise1, promise2, promise3]).then(value =&gt; {</font></div><div><font face="Arial" style="font-size: 12pt;">    console.log(value) // value是resolve那个promise的值</font></div><div><font face="Arial" style="font-size: 12pt;">})</font></div></div><div><span style="font-size: 12pt;">            </span></div><div><br/></div><div><br/></div><h2><span style="font-size: 14pt;"><br/></span></h2></div><div><br/></div></span>
</div></body></html> 